﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/js/frame.js"></script>
</head>
<body>
    <div class="framecontainer">
        <div class="cloud-panel">
            <div class="cloud-panel-header ">
                <div class="cloud-panel-title">首页元件管理</div>
            </div>
            <div class="cloud-panel-body">
                <div class="listcontainer">
                    <div class="searchop">
                        <div class="btnop">
                            <button class="btn btn-op" type="button" onclick="OpenAdd()"><span class="btntext">新增元件</span></button>
                            <button class="btn btn-op" type="button" onclick="BatchDelete()"><span class="btntext">批量删除</span></button>
                        </div>
                        <div class="btnop">
                            <input id="ElementName" type="text" class="form-control searchinput" placeholder="请输入元件名称">
                            <button class="btn" type="button" onclick="BindGrid()"><i class="icon icon-search"></i><span class="searchtext">查询</span></button>
                        </div>
                    </div>
                    <div class="tableop">
                        <table class="GridStyle" id="CloudGrid" keyid="ElementGuid" url="oplist" relationpageid="cloudpagination" otherparm="SearchParm" afterbind="AfterBindData">
                            <tr class="HeaderStyle">
                                <th scope="col" style="width: 10px;" field="check" rowalign="center"></th>
                                <th scope="col" style="width: 10px;" field="index" rowalign="center">序</th>
                                <th scope="col" style="width: 200px;" field="ElementName" rowalign="left">元件名称</th>
                                <th scope="col" style="width: 300px;" field="ElementTemplatePath" rowalign="left">模板路径</th>
                                <th scope="col" field="ElementInfo" rowalign="left">元件说明</th>
                                <th scope="col" style="width: 80px;" field="function" functionname="GetElementStatus" rowalign="center">状态</th>
                                <th scope="col" style="width: 50px;" field="SortNum" rowalign="center">排序</th>
                                <th scope="col" style="width: 50px;" field="EditButton" functionname="GridEdit" rowalign="center">详细</th>
                            </tr>
                        </table>
                    </div>
                    <div class="bottomop">
                        <div class="pageop">
                            <ul class="pagination" id="cloudpagination"></ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script>
        $(function () {
            BindGrid();
        })
        function BindGrid() {
            BindCloudGrid($("#CloudGrid"))
        }

        function SearchParm() {
            return {
                "ElementName": $("#ElementName").val(),
            };
        }
        function AfterBindData() {

        }
        function OpenAdd() {
            OpenTopDialog("新增元件", "frame/extend/element/add", 500, 800, BindGrid)
        }
        function BatchDelete() {
            var SelectRows = CloudGridChecked($("#CloudGrid"));
            if (SelectRows.length > 0) {
                OpenConfirm("确认删除选中的数据？", function () {
                    CloudPost({ "KeyID": SelectRows }, "opbatchdelete", function (res) {
                        if (res.code == 0) {
                            OpenSuccess("删除成功！", function () {
                                BindGrid();
                            })
                        } else {
                            OpenFail(res.data);
                        }
                    })
                })
            }
        }
        function GridEdit(RowData) {
            OpenTopDialog("编辑", "frame/extend/element/edit?elementguid=" + RowData.ElementGuid, 500, 800, BindGrid)
        }


        function GetElementStatus(RowData) {
            if (RowData.Enable == 100) {
                return " <button class='btn btn-op' type='button' onclick=GetElementStatusClick('" + RowData.ElementGuid + "','200')>启用</button>";
            } else {
                return " <button class='btn btn-op' type='button' onclick=GetElementStatusClick('" + RowData.ElementGuid + "','100')>禁用</button>";
            }
        }

        function GetElementStatusClick(ElementGuid, ElementStatus) {
            CloudPost({ "ElementGuid": ElementGuid, "ElementStatus": ElementStatus }, "updateElementStatus", function (res) {
                if (res.code == 0) {
                    if (ElementStatus == 200) {
                        OpenSuccess("启用成功！", function () {
                            BindGrid();
                        })
                    } else {
                        OpenSuccess("禁用成功！", function () {
                            BindGrid();
                        })
                    }

                } else {
                    OpenFail(res.data);
                }
            })
        }
    </script>
</body>
</html>
